<template>
	<view class="buy-container mainpadding mainbgc">
		<view class="header">
			<view class="text">实付金额</view>
			<view class="money">{{Number(pay_price).toFixed(2)}}</view>
		</view>
		<view class="methods ffffff border-r1">
			<view class="title mainpadding">选择支付方式</view>
			<view class="methods-item mainpadding ffffff flexbetween" @click="changeIndex(10)">
				<view class="left flexcenter">
					<image src="../../static/images/scenic/weixin-logo.png" mode="" class="logo"></image>
					<view class="name flex1">微信</view>
				</view>
				<view class="right">
					<image v-if="activeIndex==10" src="../../static/images/hotel/checked.png"
						style="width: 24rpx;height: 24rpx;"></image>
					<image v-if="activeIndex!==10" src="../../static/images/hotel/unchecked.png"
						style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
			<view class="methods-item mainpadding ffffff flexbetween" @click="changeIndex(30)">
				<view class="left flexcenter">
					<image src="../../static/images/scenic/yue-logo.png" mode="" class="logo"></image>
					<view class="name flex1">余额支付<text class="kedikou">（余额还剩{{userinfo.money}}）</text></view>
				</view>
				<view class="right">
					<image v-if="activeIndex==30" src="../../static/images/hotel/checked.png"
						style="width: 24rpx;height: 24rpx;"></image>
					<image v-if="activeIndex!==30" src="../../static/images/hotel/unchecked.png"
						style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
		</view>

		<view class="cent mainpadding ffffff flexleft border-r1 margin-top" v-if="allscore!==0">
			<image src="../../static/images/scenic/jifen-logo.png" mode="" class="logo"></image>
			<view class="cent-content">
				<text>积分抵扣</text>
				<!-- <text class="kedikou">（可抵扣{{allscore.toFixed(2)}}）</text> -->
				<text class="kedikou">（{{allscoreDes}}）</text>
			</view>
			<view class="">
				<u-switch v-model="switchValue" @change="change" activeColor="#00D2E1"></u-switch>
			</view>
		</view>

		<view class="buyBtn" @click="gopay">确认支付</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				switchValue: true,
				activeIndex: 10, //10微信支付，30余额支付
				listid: "",
				pay_price: "",
				userinfo: {},
				wxpay:{},
				allscore:0,
				allscoreDes:'',
			};
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.listid = data.id
			this.pay_price = data.pay_price
			this.allscore=data.allscore
			this.scoreToPrice(data.allscore)// 积分抵扣换算
			this.getinfo()
		},
		methods: {
			// 积分抵扣换算
			scoreToPrice(data){
				httpRequest.request('api/user/scoreToPrice', 'GET', {
					allow_score:data
				}).then(res => {
					console.log(res);
					this.allscoreDes = res.data.des
				})
			},
			getinfo() {
				httpRequest.request('api/user/index', 'GET', {}).then(res => {
					this.userinfo = res.data
				})
			},
			changeIndex(item) {
				this.activeIndex = item
			},
			gopay() {
				httpRequest.request('api/tourorder/payment', 'GET', {
					id: this.listid,
					pay_type: this.activeIndex,
					score_dk: this.switchValue ? 1 : 0, //积分抵扣
				}, false, false, true).then(res => {
                       if(res['code']==1){
							if (this.activeIndex == 10) { //微信支付流程
								this.wxpay = res.data.wxconfig
								this.callPayMent()
							}else{ //余额支付流程
								httpRequest.toast(res.msg);
								setTimeout(() => {
									uni.redirectTo({
										url:'/pages/my/jingqumpjd'
									})
								}, 1000)
							}
						}else if(res.code==2){
							httpRequest.toast(res.msg);
							setTimeout(() => {
								uni.redirectTo({
									url:'/pages/my/jingqumpjd'
								})
							}, 1000)
						}else{
							httpRequest.toast(res.msg);
							setTimeout(() => {
								uni.redirectTo({
									url:'/pages/my/jingqumpjd'
								})
							}, 1000)
						}

				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			callPayMent() {
				let _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: _this.wxpay.timeStamp,
					nonceStr: _this.wxpay.nonceStr,
					package: _this.wxpay.package,
					signType: _this.wxpay.signType,
					paySign: _this.wxpay.paySign,
					success: function(res) {
						// 支付成功
						httpRequest.toast("预定成功");
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/my//menpiaoxiangqing"
							})
						}, 1000)						
					},
					fail: function(err) {
						// 支付失败
						_this.paycatchresult = true
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 17rpx 0 38rpx 0;
		margin-bottom: 38rpx;
	}

	.text {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.money {
		font-size: 71rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #000000;
		margin-top: 33rpx;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.cent {
		justify-content: space-between;
	}

	.cent-content {
		flex: 1;
	}

	.logo {
		width: 32rpx;
		height: 32rpx;
		margin-right: 9rpx;
	}

	.kedikou {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.buyBtn {
		position: fixed;
		bottom: 30rpx;
		background-color: pink;
		width: calc(100vw - 60rpx);
		text-align: center;
		padding: 18rpx 0;
		background-color: #FF5C00;
		color: #fff;
		border-radius: 64rpx;
	}

	.methods-item {
		border-bottom: 2rpx solid #fafafa;
	}

	.methods-item:last-child {
		border-bottom: 0;
	}
</style>
